<!DOCTYPE html>
<html data-octoprint-version="{{ version.base|e }}">
    <head>
        <title data-bind="text: title">OctoPrint</title>

        <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
        <link rel="shortcut icon" href="{{ url_for('static', filename='img/tentacle-32x32.png') }}">
        <link rel="mask-icon" href="{{ url_for('static', filename='img/mask.svg') }}" color="#56BE37">
        <link rel="mask-icon-theme" href="{{ url_for('static', filename='img/mask-theme.svg') }}" color="#56BE37">
        <link rel="apple-touch-icon" sizes="114x114" href="{{ url_for('static', filename='img/apple-touch-icon-114x114.png') }}">
        <link rel="apple-touch-icon" sizes="144x144" href="{{ url_for('static', filename='img/apple-touch-icon-144x144.png') }}">

        <meta name="robots" content="noindex, nofollow, noimageindex">
        <meta name="referrer" content="no-referrer">
        <meta name="theme-color" data-bind="attr: { content: theme_color }">

        {% include 'javascripts-preload.jinja2' %}
        {% include 'stylesheets-preload.jinja2' %}
        {% include 'initscript.jinja2' %}
    </head>
    <body>
        <noscript>
            <style type="text/css">
                #page-container-main,
                #page-container-loading {
                    display:none;
                }
            </style>
            <div id="page-container-noscript">
                <div class="wrapper">
                    <div class="outer">
                        <div class="inner">
                            <div class="content">
                                <h1 class="text-error">{{ _('You don\'t seem to have JavaScript enabled') }}</h1>
                                {{ _('OctoPrint\'s UI requires JavaScript to work. Please enable JavaScript and reload.') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </noscript>

        {% if enableLoadingAnimation %}
        <div id="page-container-loading" style="display: none" data-bind="visible: loading">
            <div class="wrapper">
                <div class="outer">
                    <div class="inner">
                        <div class="content">
                            <h1 id="page-container-loading-header">{{ _('Connecting to OctoPrint\'s server...') }}</h1>
                            <p><i id="page-container-loading-spinner" class="fas fa-spinner fa-spin fa-4x"></i></p>
                            <p id="page-container-loading-error" style="display: none"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="page-container" id="page-container-main" {% if enableLoadingAnimation %}style="display: none"{% endif %} data-bind="visible: visible">
            <!-- ko allowBindings: false -->
            <div id="navbar" class="navbar navbar-static-top" aria-label="Navigation">
                <div class="navbar-inner" data-bind="css: appearanceClasses">
                    <div class="container">
                        <a class="brand" href="javascript:void(0)" data-bind="attr: {title: appearance.fullbrand}"><span data-bind="text: appearance.brand">OctoPrint</span></a>
                        <div class="nav-collapse">
                            <!-- Navbar -->
                            <ul class="nav pull-right">
                                {% for key in templates.navbar.order %}
                                    {% set data = templates.navbar.entries[key] %}
                                    {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
                                    <li id="{{ data._div }}"
                                        {% if "data_bind" in data %}data-bind="{{ data.data_bind }}"{% endif %}
                                        {% if "classes" in data %}class="{{ data.classes|join(' ') }}"{% endif %}
                                        {% if "styles" in data %}style="{{ data.styles|join(', ') }}"{% endif %}
                                            >
                                        {% try "There was an error with the template {filename} at line number {lineno}: {exception}" %}{% include data.template ignore missing %}{% endtry %}
                                    </li>
                                    {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container octoprint-container">
                <div class="row">
                    <!-- Sidebar -->
                    {% if templates.sidebar.order %}
                    <div id="sidebar" class="accordion {% if templates.tab.order %}span4{% else %}span12{% endif %}" aria-label="Sidebar">
                        {% for key in templates.sidebar.order %}
                            {% set entry, data = templates.sidebar.entries[key] %}
                            {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
                            <div id="{{ data._div }}_wrapper"
                                 class="accordion-group {% if "classes_wrapper" in data %}{{ data.classes_wrapper|join(' ') }}{% elif "classes" in data %}{{ data.classes|join(' ') }}{% endif %}"
                                 {% if "data_bind" in data %}data-bind="{{ data.data_bind }}"{% endif %}
                                 {% if "styles_wrapper" in data %} style="{{ data.styles_wrapper|join(', ') }}" {% elif "styles" in data %} style="{{ data.styles|join(', ') }}" {% endif %}
                                    >
                                <div class="accordion-heading">

                                    <a role="heading" aria-level="2" aria-label="{{ entry }}" class="accordion-toggle" data-toggle="collapse" data-test-id="sidebar-{{ data._div }}-toggle" data-target="#{{ data._div }}">
                                        {% if "icon" in data %}
                                            {% if data.icon.startswith("fa") %}
                                                {# Fontawesome 5 allows using fas, far, fab etc. (FA6 also has fa-solid, fa-regular) so plugins should use the prefix they want #}
                                                <i class="icon-black {{ data.icon }} "></i>
                                            {% else %}
                                                {# Those without the prefix will use just fa, relying on FA4 backwards compatibility #}
                                                <i class="icon-black fa fa-{{ data.icon }}"></i>
                                            {% endif %}
                                        {% endif %}
                                        {{ entry }}
                                    </a>
                                    {% if "template_header" in data %}
                                        {% try "There was an error with the template {filename} at line number {lineno}: {exception}" %}{% include data.template_header ignore missing %}{% endtry %}
                                    {% endif %}
                                </div>
                                <div id="{{ data._div }}"
                                     class="accordion-body collapse in {% if "classes_content" in data %}{{ data.classes_content|join(' ') }}{% elif "classes" in data %}{{ data.classes|join(' ') }}{% endif %}"
                                     {% if "styles_content" in data %} style="{{ data.styles_content|join(', ') }}" {% elif "styles" in data %} style="{{ data.styles|join(', ') }}"{% endif %}
                                        >
                                    <div class="accordion-inner" data-test-id="sidebar-{{ data._div }}-content">
                                        {% try "There was an error with the template {filename} at line number {lineno}: {exception}" %}{% include data.template ignore missing %}{% endtry %}
                                    </div>
                                </div>
                            </div>
                            {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
                        {% endfor %}
                    </div>
                    {% endif %}

                    <!-- Tabs -->
                    {% if templates.tab.order %}
                    <div class="tabbable {% if templates.sidebar.order %}span8{% else %}span12{% endif %}" aria-label="Tabs">
                        <ul class="nav nav-tabs" id="tabs" role="tablist">
                            {% for key in templates.tab.order %}
                                {% set entry, data = templates.tab.entries[key] %}
                                {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
                                <li role="tab" id="{{ data._div }}_link"
                                    class="{% if "classes_link" in data %}{{ data.classes_link|join(' ') }}{% elif "classes" in data %}{{ data.classes|join(' ') }}{% endif %}"
                                    {% if "data_bind" in data %}data-bind="{{ data.data_bind }}"{% endif %}
                                    {% if "styles_link" in data %} style="{{ data.styles_link|join(', ') }}" {% elif "styles" in data %} style="{{ data.styles|join(', ') }}" {% endif %}
                                        >
                                        <a href="#{{ data._div }}" data-toggle="tab" aria-label="{{ entry }}">{{ entry }}</a>
                                </li>
                                {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
                            {% endfor %}
                        </ul>

                        <div id="tabs_content" class="tab-content">
                            {% for key in templates.tab.order %}
                                {% set entry, data = templates.tab.entries[key] %}
                                {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- ko allowBindings: false -->{% endif %}
                                <div id="{{ data._div }}" role="tabpanel" aria-label="{{ entry }}"
                                     class="tab-pane{% if loop.first %} active{% endif %}{% if "additional_classes" in data %} {{ data.additional_classes|join(' ') }}{% endif %}"
                                     {% if "data_bind" in data %}data-bind="{{ data.data_bind }}"{% endif %}
                                     {% if "styles_content" in data %} style="{{ data.styles_content|join(', ') }}" {% elif "styles" in data %} style="{{ data.styles|join(', ') }}" {% endif %}
                                        >
                                            {% try "There was an error with the template {filename} at line number {lineno}: {exception}" %}{% include data.template ignore missing %}{% endtry %}
                                </div>
                                {% if "custom_bindings" not in data or data["custom_bindings"] %}<!-- /ko -->{% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
                {%  include 'footer.jinja2' %}
            </div>

            <!-- Dialogs -->
            {% include 'dialogs/settings.jinja2' %}
            {% include 'dialogs/slicing.jinja2' %}
            {% include 'dialogs/usersettings.jinja2' %}
            {% include 'dialogs/wizard.jinja2' %}
            {% include 'dialogs/about.jinja2' %}
            {% include 'dialogs/files.jinja2' %}
            {% include 'dialogs/temperature.jinja2' %}
            {% include 'dialogs/timelapse.jinja2' %}
            {% include 'dialogs/firmwareerror.jinja2' %}
            {% include 'dialogs/reauthenticate.jinja2' %}
            <!-- End of dialogs -->

            <!-- Overlays -->
            {% include 'overlays/dragndrop.jinja2' %}
            {% include 'overlays/offline.jinja2' %}
            {% include 'overlays/reloadui.jinja2' %}
            <!-- End of overlays -->

            {% include 'stylesheets.jinja2' %}
            {% include 'javascripts.jinja2' %}

            <!-- Generic plugin template files -->
            {% for key in templates.generic.order %}
                {% set data = templates.generic.entries[key] %}
                {% try "<!-- There was an error with the template {filename} at line number {lineno}: {exception} -->" %}{% include data.template ignore missing %}{% endtry %}
            {% endfor %}
            <!-- End of generic plugin template files -->
            <!-- /ko -->
        </div>

    </body>
</html>
